import NotAccessPage from '@/components/NotAccessPage';
import PageContainerMonthEmphasize from '@/pages/assess/month/emphasize/page/PageContainerMonthEmphasize';
import PageContainerCollect from '@/pages/assess/week/collect/page/PageContainerCollect';
import TableOverview from '@/pages/assess/week/culture/analysis/TableOverview';
import PageContainerWeekEmphasize from '@/pages/assess/week/emphasize/page/PageContainerWeekEmphasize';
import PageContainerThreeGoodArticle from '@/pages/assess/week/threeGoodArticle/page/PageContainerThreeGoodArticle';
import PageContainerDatahubRecord from '@/pages/datahub/record/components/PageContainerDatahubRecord';
import PageContainerTophub from '@/pages/tophub/page/PageContainerTophub';
import { parse } from '@/utils/historyUtils';
import {
  BarChartOutlined,
  FileSyncOutlined,
  FileZipOutlined,
  LineChartOutlined,
} from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useEffect, useState } from 'react';
import { useAccess } from 'umi';

export default (): React.ReactNode => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('tophub');
  useEffect(() => {
    const { activeKey } = parse(location.search) as { activeKey: string };
    console.log(activeKey);

    if (activeKey) {
      setTabActiveKeyState(activeKey);
    }
  }, []);
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };
  const menuList = () => {
    const menus = [];

    // if (access.inIframeShowAssess) {
    //   menus.push({
    //     label: <span>质效考核辅助{renderBadge(0, tabActiveKey === 'assess')}</span>,
    //     key: 'assess',
    //     icon: <DatabaseOutlined />,
    //   });
    // }

    // if (access.inIframeShowEmphasize) {
    //   menus.push({
    //     label: <span>传播质效{renderBadge(0, tabActiveKey === 'quality')}</span>,
    //     key: 'quality',
    //     icon: <BarChartOutlined />,
    //   });
    // }
    if (access.inIframeShowEmphasize) {

      menus.push({
        label: <span>传播质效-重要稿件（月）{renderBadge(0, tabActiveKey === 'assessMonthEmphasize')}</span>,
        key: 'assessMonthEmphasize',
        icon: <BarChartOutlined />,
      });

      menus.push({
        label: <span>传播质效-重要稿件（周）{renderBadge(0, tabActiveKey === 'assessWeekEmphasize')}</span>,
        key: 'assessWeekEmphasize',
        icon: <BarChartOutlined />,
      });


      menus.push({
        label: <span>三好作品展示{renderBadge(0, tabActiveKey === 'assessWeekThreeGoodArticle')}</span>,
        key: 'assessWeekThreeGoodArticle',
        icon: <LineChartOutlined />,
      });
    }

    if (access.inIframeShowEmphasize) {
      menus.push({
        label: <span>传播质效-每周发稿情况{renderBadge(0, tabActiveKey === 'assessWeekCollect')}</span>,
        key: 'assessWeekCollect',
        icon: <FileZipOutlined />,
      });
    }

    if (access.inIframeShowDatahub) {
      menus.push({
        label: <span>新闻数据池{renderBadge(0, tabActiveKey === 'datahub')}</span>,
        key: 'datahub',
        icon: <FileSyncOutlined />,
      });
    }

    if (access.inIframeShowTophub) {
      menus.push({
        label: <span>热搜热榜{renderBadge(0, tabActiveKey === 'tophub')}</span>,
        key: 'tophub',
        icon: <LineChartOutlined />,
      });
    }

    return menus;

    // if (currentUser?.permissions.includes('assess:page')) {
    //   return [
    //     {
    //       label: <span>质效考核{renderBadge(0, tabActiveKey === 'assess')}</span>,
    //       key: 'assess',
    //       icon: <DatabaseOutlined />,
    //     },
    //     {
    //       label: <span>大数据{renderBadge(0, tabActiveKey === 'datahub')}</span>,
    //       key: 'datahub',
    //       icon: <FileSyncOutlined />,
    //     },
    //     {
    //       label: <span>热搜热榜{renderBadge(0, tabActiveKey === 'tophub')}</span>,
    //       key: 'tophub',
    //       icon: <FileSyncOutlined />,
    //     },
    //     // {
    //     //   label: <span>热搜热榜补录{renderBadge(0, tabActiveKey === 'record')}</span>,
    //     //   key: 'record',
    //     //   icon: <FileSyncOutlined />,
    //     // },
    //   ];
    // } else {
    //   return [];
    // }
  };
  return (
    <Layout
      hasSider
      style={{
        backgroundColor: '#F7F7F7',
        padding: '15px',
        height: '100%',
      }}
    >
      <Layout.Sider
        width={300}
        style={{
          backgroundColor: '#F7F7F7',
          overflow: 'auto',
          height: '100%',
          position: 'fixed',
          paddingBottom: 30,
        }}
      >
        <Card
          style={{
            height: '100%',
          }}
          bordered={false}
          styles={{
            body: {
              padding: '8px 15px 15px',
            },
          }}
        >
          <span
            style={{
              fontSize: 14,
              display: 'flex',
              justifyContent: 'center',
              padding: 5,
              fontWeight: 'bold',
            }}
          >
            全链质效激励
          </span>
          <Menu
            onSelect={(info: SelectInfo) => {
              setTabActiveKeyState(info.key);
            }}
            style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
            selectedKeys={[tabActiveKey]}
            mode="vertical"
            items={menuList()}
          />
        </Card>
      </Layout.Sider>
      <Layout.Content style={{ marginLeft: '315px' }}>
        <div
          style={{
            width: 'calc(100% - 315px)',
            height: '100%',
            position: 'fixed',
            paddingBottom: 30,
            paddingRight: 30,
          }}
        >
          <Card
            style={{
              height: '100%',
              overflow: 'auto',
            }}
            styles={{
              body: {
                padding: '8px',
              },
            }}
          >
            <>
              {tabActiveKey === 'assessWeekCulture' && <TableOverview />}
              {/* {tabActiveKey === 'quality' &&
                (access.inIframeShowEmphasize ? <PageContainerQuality /> : <NotAccessPage />)} */}
              {tabActiveKey === 'assessMonthEmphasize' &&
                (access.inIframeShowEmphasize ? <PageContainerMonthEmphasize /> : <NotAccessPage />)}
              {tabActiveKey === 'assessWeekEmphasize' &&
                (access.inIframeShowEmphasize ? <PageContainerWeekEmphasize /> : <NotAccessPage />)}
              {tabActiveKey === 'assessWeekThreeGoodArticle' &&
                (access.inIframeShowEmphasize ? (
                  <PageContainerThreeGoodArticle />
                ) : (
                  <NotAccessPage />
                ))}
              {tabActiveKey === 'assessWeekCollect' &&
                (access.inIframeShowEmphasize ? <PageContainerCollect /> : <NotAccessPage />)}
              {tabActiveKey === 'datahub' &&
                (access.inIframeShowDatahub ? <PageContainerDatahubRecord /> : <NotAccessPage />)}
              {tabActiveKey === 'tophub' &&
                (access.inIframeShowTophub ? <PageContainerTophub /> : <NotAccessPage />)}
            </>
          </Card>
        </div>
      </Layout.Content>
    </Layout>
  );
};
